# autoUpdate

This function adds listeners that automatically call an update
function when necessary so that the floating element remains
“anchored” to the reference element in a variety of scenarios
without detaching.

```js
autoUpdate(referenceEl, floatingEl, update, options);
```

Only call this function when the floating element is mounted to
the DOM (or visible on the screen).

```js
import {computePosition, autoUpdate} from '@floating-ui/dom';

const cleanup = autoUpdate(referenceEl, floatingEl, () => {
  computePosition(referenceEl, floatingEl).then(({x, y}) => {
    // ...
  });
});
```

It returns a cleanup function that should be invoked when the
floating element is no longer mounted on the DOM (or visible on
the screen).

```js
// Later, when the element is removed from the screen
cleanup();
```

> Requires a `ResizeObserver{:.class}` by default.

## Options

These are the options you can pass as a fourth argument to
`autoUpdate(){:js}`.

```js
interface Options {
  ancestorScroll?: boolean;
  ancestorResize?: boolean;
  elementResize?: boolean;
  animationFrame?: boolean;
}
```

### ancestorScroll

default: `true{:js}`

Whether to update the position when an overflow ancestor is
scrolled.

```js
const cleanup = autoUpdate(referenceEl, floatingEl, update, {
  ancestorScroll: false,
});
```

### ancestorResize

default: `true{:js}`

Whether to update the position when an overflow ancestor is
resized. This uses the `resize{:.string}` event.

```js
const cleanup = autoUpdate(referenceEl, floatingEl, update, {
  ancestorResize: false,
});
```

### elementResize

default: `true{:js}`

Whether to update the position when either the reference or
floating elements resized. This uses a `ResizeObserver{:.class}`.

To support old browsers, polyfill the constructor, or disable
this option and update manually when the elements resize.

```js
const cleanup = autoUpdate(referenceEl, floatingEl, update, {
  elementResize: false,
});
```

### animationFrame

default: `false{:js}`

Whether to update the position of the floating element on every
animation frame if required. This is optimized for performance
but can still be costly.

Setting this to `true{:js}` disables the scroll, resize, and
reference `ResizeObserver{:.class}` listeners as they become
unnecessary. Only the floating element's
`ResizeObserver{:.class}` remains active, if
`elementResize{:.objectKey}` is `true{:js}`.

```js
const cleanup = autoUpdate(referenceEl, floatingEl, update, {
  animationFrame: true,
});
```

This option should be used sparingly but can also automatically
handle **layout** changes where the reference element moves on
the screen, which none of the other options can handle.
